<template>
	<view class="u-demo">
		<view class="u-demo-area">
			<u-swiper :height="450" :list="list" :title="title" :effect3d="effect3d" :indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item :title="carsDetail.title" :arrow="false" ></u-cell-item>
				<u-cell-item title="日均价" :arrow="false">￥{{carsDetail.price}}元</u-cell-item>
				<u-cell-item v-for="(item,index) in carsDetail.json" :key="index" :title="translate(index)" :arrow="false" :value="item"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="fix-bottom">
			<!--两个按钮-->
			<u-row gutter="10" justify="center">
				<u-col span="8">
					<view class="tip">
						出租天数{{params.interval}}天，日均价为￥{{carsDetail.price}}元
					</view>
					<view>总金额为：￥{{carsDetail.price * 100 * params.interval / 100 }}元</view></u-col>
				<u-col span="4"><u-button type="primary" shape="square" @click="submitOrder">提交订单</u-button></u-col>
			</u-row>
			<u-modal ref="uModal" v-model="show" :show-cancel-button="true"
					  @confirm="confirm" :content="content"
			></u-modal>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show:false,
			content:'',
			list: [],
			title: false,
			mode: 'round',
			indicatorPos: 'bottomCenter',
			effect3d: false,
			carId: 0,
			carsDetail:[],
			params : [],
			carDetailChinese:[
				{
					label: 'speed_changing_box',
					value: '变速箱'
				},
				{
					label: 'fuel_tank_capacity',
					value: '油箱容量'
				},
				{
					label: 'displacement',
					value: '排量'
				},
				{
					label: 'fuel_consumption',
					value: '百公里油耗'
				},
				{
					label: 'seating',
					value: '座位数'
				},
				{
					label: 'air_inflow',
					value: '进气'
				}
			]
		};
	},
	onLoad(option) {
		// 页面加载的时候，获取传过来的参数
		this.params = option;
		this.carId = option.carId;
		let postData = {
			'carId':this.carId
		};
		this.$u.api.carsDetail(postData).then(res=>{
			this.list = res.data.images;
			this.carsDetail = res.data;
		})
	},
	methods: {
		translate(val){
			let str='';
			this.carDetailChinese.forEach((item) => {
				if (item.label === val)
					str = item.value;
			});
			return str;
		},
		click(index) {
			// 大图预览
			uni.previewImage({
				current: this.list[index],
				urls: this.list
			});
		},
		submitOrder(){
			this.show = true;
			this.content = '从'+this.params.startDate+'到'+this.params.endDate+'，' +
					'共租车'+this.params.interval+'天';
		},
		confirm(){
			let postDate = {
				carId:this.carId,
				startDate:this.params.startDate,
				endDate:this.params.endDate
			};
			this.$u.api.submitOrder(postDate).then(res=>{
				if(res.code ===1){
					// 提交订单成功，跳转订单列表
					this.$u.route({
						type: 'tab',
						url: 'pages/template/order/index'
					});
				}else {
					this.$u.toast(res.msg);
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.u-m-t-20 {
	padding-bottom: 70rpx;
}
.fix-bottom {
	position: fixed;
	width: 100vw;
	left: 0;
	right: 0;
	padding: 20rpx 15rpx;
	background-color: #ffffff;
	bottom: var(--window-bottom, 0);
	z-index: 2;
	.tip{
		padding: 10rpx 0;
		font-size: 14rpx;
	}
}

</style>
